<template>
  <RouterView />

  <!-- 下面tabbar组件 -->
  <van-tabbar
    v-model="active"
    active-color="orange"
    :route="true"
    :placeholder="true"
    @change="handleChange"
  >
    <van-tabbar-item to="/home/index">
      <template #icon>
        <span>🏀</span>
      </template>
      首页
    </van-tabbar-item>
    <van-tabbar-item icon="apps-o" to="/home/classify">分类</van-tabbar-item>
    <van-tabbar-item icon="shopping-cart-o" to="/home/cart">
      购物车
    </van-tabbar-item>
    <van-tabbar-item icon="user-o" to="/home/mine">我的</van-tabbar-item>
  </van-tabbar>
</template>

<script setup>
import { ref } from "vue";

const active = ref(0);
const handleChange = (active) => {
  console.log(active);
};
</script>
